<template>
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="val.window_open"
    title="发布公会招募信息"
  >
    <template #content>
      <div class="model" ref="model">
        <div class="stitle">· 招募信息 ·</div>
        <div class="_box0">
          <n-grid x-gap="8" y-gap="8" :cols="parseInt(val.width / 350)">
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>公会名称：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="val.sub.guild_name"
                  ></n-input>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>公会区服：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    :size="cfg.sizebtn"
                    v-model:value="val.sub.sv"
                    :options="val.tab_sv"
                    :to="`body`"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>公会排名：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    placeholder="10"
                    :size="cfg.sizebtn"
                    v-model:value="val.sub.top"
                    :show-button="false"
                  >
                    <template #suffix>名</template>
                  </n-input-number>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>招募有效期：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    :size="cfg.sizebtn"
                    placeholder="请选择日期，过期自动隐藏招募信息。"
                    v-model:value="val.sub.time"
                    :options="val.time"
                    :to="`body`"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>伤害要求：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    placeholder="不需要留空 单位亿 1.11"
                    :size="cfg.sizebtn"
                    v-model:value="val.sub.dmg_E"
                    :show-button="false"
                  >
                    <template #suffix>亿</template>
                  </n-input-number>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>联系方式：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    placeholder="请填写wx号 或 qq群 或 QQ号"
                    :size="cfg.sizebtn"
                    v-model:value="val.sub.contact"
                  >
                  </n-input>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>公会标签：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    placeholder="不需要可留空"
                    :to="`body`"
                    v-model:value="val.sub.tag"
                    :size="cfg.sizebtn"
                    :max-tag-count="1"
                    :options="val.tab_if"
                    multiple
                  />
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
        <div class="_box0">
          <n-grid x-gap="8" y-gap="8" :cols="2">
            <n-gi span="2">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>招募内容：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    type="textarea"
                    v-model:value="val.sub.text"
                    placeholder="不需要可留空，禁止填写无关内容"
                    :size="cfg.sizebtn"
                    :autosize="{
                      minRows: 2,
                    }"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="2">
              <div class="_banr">
                <div class="_2_title2" style="width: 85px">
                  <div>招募图片：</div>
                </div>
                <div class="_2_val">
                  <div v-if="cfg.user?.authkey != null">
                    <div style="margin-bottom: 5px" class="mb_font_xs">
                      只允许（二维码图、数据图、排名结算图）
                    </div>
                    <n-upload
                      multiple
                      directory-dnd
                      list-type="image-card"
                      :action="`https://gtimg.ww2.ren/upload.php?type=recruit&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                      @finish="ct.imgfin"
                      @remove="ct.imgremove"
                      v-model:file-list="val.filelist"
                      :max="3"
                    >
                      <n-upload-dragger> 上传图片 </n-upload-dragger>
                    </n-upload>
                  </div>
                  <div v-else>
                    请登录后使用
                    <n-button :size="cfg.sizebtn" @click="cfg.loginif = true"
                      >登录</n-button
                    >
                  </div>
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
      </div>
    </template>
    <template #footer>
      <template v-if="cfg.user?.authkey != null">
        <n-button type="gt_y" :disabled="val.subdb" :size="cfg.sizebtn" @click="ct.submit"
          >提交招募信息</n-button
        >
      </template>
      <template v-else>
        <n-button type="gt_y" :size="cfg.sizebtn" @click="cfg.loginif = true"
          >登录账号</n-button
        >
      </template>
    </template>
  </component>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";
import { tab } from "./gselect.js";

export default defineComponent({
  props: {
    window_open: Boolean,
  },
  setup(props, { emit }) {
    const model = ref(null);
    let val = reactive({
      subdb: false,
      width: 0,
      window_open: false,
      filelist: [],
      sub: {
        sendlist: [],
      },
      ...tab,
    });
    let ct = {
      imgremove: async (e) => {
        try {
          const fileid = e.file.id;
          const upfile = val.sub.sendlist?.find((e) => e.fid == fileid);

          let res = await cfg.axios.get(`https://gtimg.ww2.ren/upload.php`, {
            params: {
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
              type: "delete",
              fileid: upfile.id,
            },
          });

          //删除图片
          val.sub.sendlist = val.sub.sendlist.filter((e) => e.fid != fileid);
        } catch (error) {
          alert("删除失败" + error);
        }
      },
      imgfin: (e) => {
        try {
          let obj = JSON.parse(e.event.target.response);
          obj.data.fid = e.file.id;
          val.sub.sendlist.push(obj.data);
        } catch (error) {
          alert("上传失败" + error);
        }
      },
      submit: async () => {
        try {
          val.subdb = true;
          const sl = val.select;

          let res = await cfg.axios.post(`${cfg.url}`, val.sub, {
            params: {
              t: "v2/get",
              t2: "introduction/recruit",
              t3: "save",
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
            },
          });
          res = res.data;
          val.subdb = false;
          if (res.code == -1) {
            cfg.msg.error(res.msg);
            return;
          } else {
            cfg.msg.success(res.msg);
            emit("event-new", res.data);
          }
          val.window_open = false;
        } catch (error) {
          cfg.msg.error(error);
          val.subdb = false;
        }
      },
    };

    watch(
      () => val.window_open,
      (newVal) => {
        if (!newVal) {
          setTimeout(() => {
            emit("update:window_open", false);
          }, 250);
        }
      }
    );

    //监听窗口变化事件
    const handleResize = () => {
      if (val.window_open == true) {
        const width = model.value?.offsetWidth;
        val.width = width;
      }
    };
    //热更新时移除监听
    watchEffect(() => {
      window.removeEventListener("resize", handleResize);
    });
    //监听窗口变化
    onMounted(() => {
      val.window_open = true;
      nextTick(() => {
        window.addEventListener("resize", handleResize);
        handleResize();
      });
    });
    //关闭时候移除监听
    onUnmounted(() => {
      window.removeEventListener("resize", handleResize);
    });

    return {
      cfg,
      props,
      val,
      ct,
      model,
    };
  },
  //载入完成
  mounted() {
    this.val.window_open = true;
  },
});
</script>
